<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;height: 450px;">
    <el-table-column label="类型" width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.createTime | dateFormat }}
      </template>
    </el-table-column>
    <el-table-column label="最新博客" min-width="180">
      <template slot-scope="scope">
        <p class="title" @click="getBlogInfo(scope.row.id)">
          {{ scope.row.title }}
        </p>
      </template>
    </el-table-column>
    <el-table-column label="阅读数" width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.views }}
      </template>
    </el-table-column>
    <el-table-column label="类型" width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.typeName }}
      </template>
    </el-table-column>
    <el-table-column label="类别" width="100" align="center">
      <template slot-scope="scope">
        <el-tag>
          {{ scope.row.flag }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reqBlogList } from '@/api/adminApi'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      list: null,
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取最新博客列表
    getList() {
      reqBlogList({ pageNum: 1, pageSize: 10 }).then(data => {
        this.list = data.list
      })
    },
    // 跳转到博客详情页
    getBlogInfo(blogId) {
      this.$router.push({ path: '/blogInfo', query: { id: blogId } });
    },
  }
}
</script>
<style scoped lang="less">
.title:hover {
  color: #3a8ee6;
  cursor: pointer;
}
</style>
